<template>
    <!-- <el-row type="flex">
        <el-col :span="17">
            <Left ref="jsMind" @success="this.refreshChange" />
        </el-col>

        <el-col :span="7">

            <basic-container>
                <avue-crud :option="option" :table-loading="loading" :data="data" v-model:search="search"
                    :permission="permissionList" :before-open="beforeOpen" @search-change="searchChange" ref="crud"
                    @refresh-change="refreshChange" @row-dblclick="dbClick" @on-load="onLoad">
                    <template #search-menu="{ row, size }">
                        <div style="display: flex;">
                            <el-button :size="size" type="primary" @click="searchChange(this.search,)">搜 索</el-button>
                            <el-button :size="size" type="default" @click="searchReset()">清 空</el-button>
                        </div>
                    </template>
                    <template #menu="{ row, size, type }">
                        <el-tooltip content="新增子项" placement="top">
                            <el-button icon="el-icon-plus" link :size="size" :type="type" @click="() => handleAdd(row)">
                            </el-button>
                        </el-tooltip>

                        <el-tooltip content="删除" placement="top">
                            <el-button icon="el-icon-delete" link :size="size" :type="type" @click="() => rowDel(row)">
                            </el-button>
                        </el-tooltip>
                    </template>
                </avue-crud>
            </basic-container>
        </el-col>
    </el-row> -->
    <basic-container>
    <div id="twoBox" class="drag-two-box">
        <div id="twoleft" class="drag-two-left">
            <Left ref="jsMind" @success="this.refreshChange" />

        </div>
        <div id="tworesize" class="drag-two-resize"></div>
        <div id="tworight" class="drag-two-right">

                <avue-crud :option="option" :table-loading="loading" :data="data" v-model:search="search"
                    :permission="permissionList" :before-open="beforeOpen" @search-change="searchChange" ref="crud"
                    @refresh-change="refreshChange" @row-dblclick="dbClick" @on-load="onLoad">
                    <template #search-menu="{ row, size }">
                        <div style="display: flex; padding-left: 5px;">
                            <el-button :size="size" type="primary" @click="searchChange(this.search,)">搜 索</el-button>
                            <el-button :size="size" type="default" @click="searchReset()">清 空</el-button>
                        </div>
                    </template>
                    <template #menu="{ row, size, type }">
                        <el-tooltip content="新增子项" placement="top" v-if="permission.material_no_chart_add">
                            <el-button icon="el-icon-plus" link :size="size" :type="type" @click="() => handleAdd(row)">
                            </el-button>
                        </el-tooltip>

                        <el-tooltip content="删除" placement="top" v-if="permission.material_no_chart_delete">
                            <el-button icon="el-icon-delete" link :size="size" :type="type" @click="() => rowDel(row)">
                            </el-button>
                        </el-tooltip>
                    </template>
                    <template #menu-left>
                        <div >
                        <span style="color:dimgrey; padding-left: 5px; font-size: 12px; display:flex; transform: translateY(100%);">双击可自动定位左侧编号节点</span>
                        </div>
                    </template>
                </avue-crud>


        </div>
    </div>
    </basic-container>
</template>

<script>
import { getList, getDetail, add, update, remove, getTree } from "@/api/anwise/material/material_no_chart";
import { mapGetters } from "vuex";
import Left from './front_jsmind.vue';

// import Right from './right.vue';

export default {
    components: {
        Left,
    },
    data() {
        return {
            form: {},
            query: {},
            loading: true,
            dateFormat: 'YYYY-MM-DD',
            pickerOptions: {},
            page: {
                pageSize: 20,
                currentPage: 1,
                total: 0,
                layout:'sizes,pager'
            },
            search: {},
            selectionList: [],
            option: {
                height: '70vh',
                calcHeight: 30,
                tip: false,
                searchShow: true,
                searchMenuSpan: 6,
                border: true,
                index: false,
                selection: false,
                labelWidth: 150,
                indexWidth: 100,
                menuWidth: 100,
                addBtn: false,
                editBtn: false,
                viewBtn: false,
                delBtn: false,
                searchBtn: false,
                searchMenuPosition: 'left',
                columnBtn: false,
                emptyBtn: false,
                searchSpan: 12,
                stripe: true,
                searchIcon: false,
                searchShowBtn: false,
                defaultExpandAll: true,
                rowParentKey: 'parentId',
                rowKey: "id",
                searchEnter:true,
                column: [
                    {
                        label: "编号前缀",
                        prop: "parentCode",
                        type: "input",
                        search: true,
                        overHidden: true,
                        rules: [{
                            required: true,
                            message: "请输入编号前缀",
                            trigger: "blur"
                        }],
                    },
                    {
                        label: "编号代码",
                        prop: "codeNo",
                        type: "input",
                        overHidden: true,
                        width: 100,
                        rules: [{
                            required: true,
                            message: "请输入编号代码",
                            trigger: "blur"
                        }],
                    },
                    {
                        label: "代码名称",
                        prop: "codeName",
                        type: "input",
                        search: true,
                        overHidden: true,
                        width: 100,
                        rules: [{
                            required: true,
                            message: "请输入代码名称",
                            trigger: "blur"
                        }],
                    },
                ]
            },
            data: []
        };
    },
    computed: {
        ...mapGetters(["permission"]),
        permissionList() {
            return {
                addBtn: this.validData(this.permission.material_no_add, false),
                viewBtn: this.validData(this.permission.material_no_view, false),
                delBtn: this.validData(this.permission.material_no_delete, false),
                editBtn: this.validData(this.permission.material_no_edit, false)
            };
        },
        ids() {
            let ids = [];
            this.selectionList.forEach(ele => {
                ids.push(ele.id);
            });
            return ids.join(",");
        }
    },
    mounted() {
        this.dragTwoColDiv("twoBox", "twoleft", "tworesize", "tworight");
    },
    methods: {
        handleAdd(row) {
            this.$refs.jsMind.showAdd(row);
        },

        dbClick(row) {
            console.log('333333');
            this.$refs.jsMind.handleDbClick(row)
        },
        sortChange(val) {
            console.log(val)
            this.sort = {
                prop: val.prop,
                order: val.order
            };
            let order = "";
            if (this.sort.prop && this.sort.order) {
                if (this.sort.order === "descending") {
                    order = `${this.sort.prop} desc`
                } else {
                    order = `${this.sort.prop} asc`
                }
            }
            this.query.orderBy = order;
            this.onLoad(this.page);
        },
        rowDel(row) {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    return remove(row.id);
                })
                .then(() => {
                    this.onLoad(this.page);
                    this.$refs.jsMind.refreshJsMind();
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    });
                });
        },
        handleDelete() {
            if (this.selectionList.length === 0) {
                this.$message.warning("请选择至少一条数据");
                return;
            }
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    return remove(this.ids);
                })
                .then(() => {
                    this.onLoad(this.page);
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    });
                    this.$refs.crud.toggleSelection();
                });
        },
        beforeOpen(done, type) {
            if (["edit", "view"].includes(type)) {
                getDetail(this.form.id).then(res => {
                    this.form = res.data.data;
                });
            }
            done();
        },
        searchReset() {
            this.query = {};
            console.log();
            this.search.createTimeSearch = '';
            this.search.parentCode = "";
            this.search.codeName = "";
            this.onLoad(this.page);
        },
        searchChange(params, done) {
            this.query = params;
            this.page.currentPage = 1
            this.onLoad(this.page, params);
            if (done) {
                done();
            }

        },
        selectionChange(list) {
            this.selectionList = list;
        },
        selectionClear() {
            this.selectionList = [];
            this.$refs.crud.toggleSelection();
        },
        currentChange(currentPage) {
            this.page.currentPage = currentPage;
        },
        sizeChange(pageSize) {
            this.page.pageSize = pageSize;
        },
        refreshChange() {
            this.onLoad(this.page, this.query);
        },
        onLoad(page, params = {}) {
            this.loading = true;
            getTree(Object.assign(params, this.query)).then(res => {
                console.log(res.data)
                const data = res.data.data;
                this.data = data;
                this.loading = false;
                this.selectionClear();
            });
        },
        // treeLoad(tree, treeNode, resolve) {
        //     const parentId = tree.id;
        //     getTree().then(res => {
        //         console.log(res.data)
        //         resolve(res.data.data);
        //     });
        // }
        dragTwoColDiv(contentId, leftBoxId, resizeId, rightBoxId) {
            let resize = document.getElementById(resizeId);
            let leftBox = document.getElementById(leftBoxId);
            let rightBox = document.getElementById(rightBoxId);
            let box = document.getElementById(contentId);
            resize.onmousedown = function (e) {
                let startX = e.clientX;
                resize.left = resize.offsetLeft;
                document.onmousemove = function (e) {
                    let endX = e.clientX;
                    let moveLen = resize.left + (endX - startX);
                    let maxT = box.clientWidth - resize.offsetWidth;
                    if (moveLen < 150) moveLen = 150;
                    if (moveLen > maxT - 150) moveLen = maxT - 150;
                    resize.style.left = moveLen;
                    leftBox.style.width = moveLen + 'px';
                    rightBox.style.width = (box.clientWidth - moveLen - 5) + 'px';
                }
                document.onmouseup = function () {
                    document.onmousemove = null;
                    document.onmouseup = null;
                    resize.releaseCapture && resize.releaseCapture();
                }
                resize.setCapture && resize.setCapture();
                return false;
            }
        }
    }
};

</script>

<style lang="scss" scoped>
/*两列 */
#twoBox {
    display: flex;
}

#twoleft {
    width: calc(70% - 10px);
}

#tworesize {
    width: 5px;
    cursor: w-resize;
}

#tworight {
    width: 30%;
}

/* 三列 */
#contentId {
    display: flex;
}

#leftId {
    width: calc(20% - 10px);
}

#resizeOne {
    width: 5px;
    cursor: w-resize;
}

#centerId {
    width: 60%;
}

#resizeTwo {
    width: 5px;
    cursor: w-resize;
}

#rightId {
    width: 20%;
}

/* 两横 */
#mainId {
    width: 100%;
    overflow: hidden;
    position: relative;
}

#topBoxId {
    height: calc(80% - 5px);
}

#resizeId {
    height: 5px;
    cursor: s-resize;
}

#downBoxId {
    height: 20%;
}


.all {
    padding: 30px;
    list-style: none;
}

.drag-main {
    margin-bottom: 30px;

    h2 {
        margin-bottom: 30px;
    }
}

.drag-two-box {
    display: flex;
    .drag-two-resize {
        width: 5px;
        cursor: w-resize;
        background: #dddee0;
    }
}

</style>
